<template>
    <div class="connection-page">
        <div class="form-header">
            <h1 class="page-title">新建数据连接</h1>
            <el-button class="return-button" type="danger" @click="close">
                <el-icon><CircleCloseFilled /></el-icon>
                关闭
            </el-button>
        </div>
        <ConnCard class="conn-card" title="Database" :connections="Databases" @select-database="handleDatabaseSelect" />
        <ConnCard class="conn-card" title="Searching" :connections="SearchingDatabases" @select-database="handleDatabaseSelect" />
        <ConnCard class="conn-card" title="SQL on Hadoop" :connections="HadoopDatabases" @select-database="handleDatabaseSelect" />
        <ConnCard class="conn-card" title="Cloud" :connections="CloudDatabases" @select-database="handleDatabaseSelect" />
        <ConnCard class="conn-card" title="NoSQL / NewSQL" :connections="NosqlDatabases" @select-database="handleDatabaseSelect" />
    </div>
</template>
  
<script setup lang="ts">
import ConnCard from '@/views/connection/ConnCard.vue'
import { useRouter } from 'vue-router'
import { Database } from '@/types/api/database'
import { ElButton } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { inject } from 'vue'
import { logoMap } from '@/utils/logoLoader'
import { Databases, SearchingDatabases, HadoopDatabases, CloudDatabases, NosqlDatabases } from '@/enums/connectionTypeConst'

const updateSlideDirection: any = inject('updateSlideDirection')

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 数据连接类型选择事件 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

const router = useRouter()
const handleDatabaseSelect = (dbType: string): void => {
  updateSlideDirection(1, -1)
  router.push({
    name: 'connectionForm',
    query: { type: dbType, logo: logoMap[dbType.toLowerCase()], enterType: 'add' }
  })
}

// 定义 emit
const emit = defineEmits(['close'])

// 修改 close 函数
const close = () => {
  updateSlideDirection(1, -1)
  emit('close')
}

</script>
  
<style scoped>
/* 页面容器样式 */
.connection-page {
    background-color: #f5f7fa;
    overflow-y: auto;

    /* 隐藏滚动条 - Webkit 浏览器 */
    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
    
    /* 隐藏滚动条 - Firefox */
    scrollbar-width: none;
    
    /* 隐藏滚动条 - IE/Edge */
    -ms-overflow-style: none;
}

.form-header {
    display: flex;                    /* 弹性布局 */
    justify-content: center;          /* 两端对齐 */
    align-items: center;              /* 垂直居中 */
    margin-bottom: 20px;              /* 底部间距 */
    height: 60px;
  }

/* 页面标题样式 */
.page-title {
  text-align: center;
  font-size: 24px;                    /* 标题字号 */
}

.conn-card {
    margin: 10px;
}

.return-button {
  position: absolute;
  left: 20px;
  top: 20px;
}
</style>